<script setup>
defineProps({
  name: String,
  color: String,
  checkName: String,
  check: Boolean

})
defineEmits(['check'])
</script>

<template>
<div class="interact-button">
<span class="icon" :style="{'color': check ? color : 'unset'}" @click="$emit('check')">
    <slot>
  </slot>
</span>
  <span class="name" >
        {{check? checkName : name}}
  </span>

</div>
</template>

<style scoped>

.interact-button{
  display: inline-block;
  height: 20px;
  .name{
    font-size: 13px;
    margin: 0  12px;
    opacity: 0.5;
  }
  .icon{
    display: inline-block;

    width: 13px;

    vertical-align: middle;
    transition: 0.3s;
    &:hover{
      cursor: pointer;
      transform: scale(1.2);
    }
  }
}
</style>